'use client'

import { useState } from 'react'
import { ChevronLeft, ChevronRight, Image, MessageSquare, AlertCircle } from 'lucide-react'
import { ComicPanel } from '@/types/story'

interface ComicDisplayProps {
  panels: ComicPanel[]
  title: string
  englishTitle: string
}

export default function ComicDisplay({ panels, title, englishTitle }: ComicDisplayProps) {
  const [currentPanel, setCurrentPanel] = useState(0)
  const [imageError, setImageError] = useState<{ [key: string]: boolean }>({})

  const nextPanel = () => {
    setCurrentPanel((prev) => (prev + 1) % panels.length)
  }

  const prevPanel = () => {
    setCurrentPanel((prev) => (prev - 1 + panels.length) % panels.length)
  }

  const goToPanel = (index: number) => {
    setCurrentPanel(index)
  }

  const handleImageError = (panelId: string) => {
    setImageError(prev => ({ ...prev, [panelId]: true }))
  }

  if (!panels || panels.length === 0) {
    return (
      <div className="story-card text-center py-8">
        <AlertCircle className="h-12 w-12 text-gray-400 mx-auto mb-4" />
        <p className="text-gray-500">暂无卡通漫画内容</p>
      </div>
    )
  }

  const currentPanelData = panels[currentPanel]

  return (
    <div className="story-card">
      {/* 标题 */}
      <div className="text-center mb-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-2">{title}</h3>
        <p className="text-lg text-gray-600 font-story">{englishTitle}</p>
      </div>

      {/* 漫画展示区域 */}
      <div className="relative">
        {/* 主图展示 */}
        <div className="relative bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl p-6 mb-4">
          <div className="flex justify-center">
            <div className="relative max-w-md">
              {imageError[currentPanelData.id] ? (
                <div className="w-full h-64 bg-gray-200 rounded-lg flex items-center justify-center">
                  <div className="text-center">
                    <Image className="h-12 w-12 text-gray-400 mx-auto mb-2" />
                    <p className="text-gray-500 text-sm">图片加载失败</p>
                  </div>
                </div>
              ) : (
                <img
                  src={currentPanelData.imageUrl}
                  alt={`漫画第${currentPanel + 1}页`}
                  className="rounded-lg shadow-lg max-w-full h-auto"
                  style={{ maxHeight: '400px' }}
                  onError={() => handleImageError(currentPanelData.id)}
                />
              )}
              {/* 页码指示器 */}
              <div className="absolute top-2 right-2 bg-white bg-opacity-90 rounded-full px-2 py-1 text-sm font-medium text-gray-700">
                {currentPanel + 1} / {panels.length}
              </div>
            </div>
          </div>
        </div>

        {/* 导航按钮 */}
        <div className="flex justify-center items-center space-x-4 mb-4">
          <button
            onClick={prevPanel}
            className="p-2 rounded-full bg-white shadow-md hover:shadow-lg transition-shadow disabled:opacity-50"
            disabled={panels.length <= 1}
          >
            <ChevronLeft className="h-5 w-5 text-gray-600" />
          </button>
          
          <span className="text-sm text-gray-600 font-medium">
            第 {currentPanel + 1} 页，共 {panels.length} 页
          </span>
          
          <button
            onClick={nextPanel}
            className="p-2 rounded-full bg-white shadow-md hover:shadow-lg transition-shadow disabled:opacity-50"
            disabled={panels.length <= 1}
          >
            <ChevronRight className="h-5 w-5 text-gray-600" />
          </button>
        </div>

        {/* 缩略图导航 */}
        {panels.length > 1 && (
          <div className="flex justify-center space-x-2 mb-4">
            {panels.map((panel, index) => (
              <button
                key={panel.id}
                onClick={() => goToPanel(index)}
                className={`relative rounded-lg overflow-hidden transition-all ${
                  index === currentPanel
                    ? 'ring-2 ring-primary-500 scale-105'
                    : 'hover:scale-105'
                }`}
              >
                {imageError[panel.id] ? (
                  <div className="w-16 h-16 bg-gray-200 flex items-center justify-center">
                    <Image className="h-6 w-6 text-gray-400" />
                  </div>
                ) : (
                  <img
                    src={panel.imageUrl}
                    alt={`缩略图${index + 1}`}
                    className="w-16 h-16 object-cover"
                    onError={() => handleImageError(panel.id)}
                  />
                )}
                <div className="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-20 transition-all" />
              </button>
            ))}
          </div>
        )}

        {/* 对话气泡 */}
        <div className="bg-white rounded-lg p-4 shadow-sm border">
          <div className="flex items-start space-x-3">
            <div className="flex-shrink-0">
              <MessageSquare className="h-5 w-5 text-primary-600" />
            </div>
            <div className="flex-1">
              <div className="mb-2">
                <h4 className="font-medium text-gray-900 mb-1">中文对话</h4>
                <p className="text-gray-700">{currentPanelData.caption}</p>
              </div>
              <div>
                <h4 className="font-medium text-gray-900 mb-1">English Dialogue</h4>
                <p className="text-gray-700 font-story">{currentPanelData.englishCaption}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 操作提示 */}
      <div className="mt-4 text-center">
        <p className="text-sm text-gray-500">
          💡 点击左右箭头或缩略图来浏览不同的漫画页面
        </p>
      </div>
    </div>
  )
} 